<template>
  <el-container>
    <div class="background" :style="backgroundImage"></div>
    <cmsNavBar></cmsNavBar>
    <keep-alive>
      <cmsMain></cmsMain>
    </keep-alive>
    <el-footer height="40px">
      <cmsFooter></cmsFooter>
    </el-footer>
  </el-container>
</template>

<script>
  import cmsMain from './main.vue'
  import cmsNavBar from './NavBar.vue'
  import cmsFooter from './Footer.vue'
  // import {
  //   listNotice
  // } from "@/api/system/notice";
  // 引入背景图
  import backgroundImages from './backgroundImages.js'
  import { Icon } from 'element-ui'

  export default {
    data() {
      return {
        backgroundImages,
        // showTipTitle:"",
        // showTipType:"",
        // showTipConent:"",
        // offset:0,
        // delay:0,
        // isShowNoticeTip:false,
      };
    },
    components: {
      cmsMain,
      cmsNavBar,
      cmsFooter,
    },
    computed: {
      backgroundImage() {
        // 根据背景图数组的长度随机选择索引
        const randIndex = Math.floor(Math.random() * this.backgroundImages.length)
        return {
          // 获取对应的图片资源并将其设置到`background-image`属性上
          backgroundImage: `url(${this.backgroundImages[randIndex]})`
        }
      }
    },
    created() {
      // this.getNotice();
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      //获取公告和通知
      // getNotice(){
      //   listNotice().then(response =>{
      //     var count = -1;
      //     //将推送的内容的数量
      //     for(let i = 0;i<response.rows.length;i++){
      //         if(response.rows[i].status == "0"){
      //           count++;
      //         }
      //     }
      //     //弹窗显示公告或者通知内容
      //     for(var i = 0;i <= count;i++){
      //       //通知
      //       if(response.rows[i].noticeType == "1"){
      //           this.showTipType = "warning";
      //         }
      //         //公告
      //       else if(response.rows[i].noticeType == "2"){
      //           this.showTipType = "success";
      //         }
      //       this.showTipTitle = response.rows[i].noticeTitle;
      //       this.showTipConent = response.rows[i].noticeContent;
      //       this.offset = 100 + i * 100;
      //       this.delay = 3000 + i * 1000
      //       this.notificationShowTip();
      //     }
      //   })
      // },
      //通知显示
      // notificationShowTip(){
      //   if(isShowNoticeTip){
      //     const h = this.$createElement;
      //     this.$notify({
      //       title: this.showTipTitle,
      //       message: this.showTipConent,
      //       duration:this.delay,// 0 为不可自动关闭
      //       offset: this.offset,
      //       type: this.showTipType
      //     });
      //   }
        
      // },
      
    },
  }
</script>

<style scoped>
  .el-footer {
    /* background-color: rgba(84, 92, 100, 0.5); */
    background-color: #41535B;
    /* position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0.5px; */
  }

  .background {
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px;
    padding: 0px;
    top: 0;
    width: 100%;
    height: 120vh;
    position: fixed;
    z-index:-1;
  }

  @media screen and (max-width: 768px) {
    .title {
      width: 100%;
      background-position-x: center;
      background-position-y: 0;
    }
  }
</style>
